<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="th/include/common_head :: head(~{::title}, ~{::link}, ~{::style})">
    <title>操作日志管理</title>
    <link type="text/css" rel="stylesheet" th:href="@{${skinPath} + '/css.css'}"/>
    <style>
        .table th, .table td {
            vertical-align: middle !important;
        }

        /*自定义行间色*/
        .white {
            background-color: white;
        }

        .lightblue {
            background-color: lightblue;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="panel panel-default" style="margin-top: 10px">
        <div class="panel-heading">
            <h3 class="panel-title">
                查询
            </h3>
        </div>
        <div class="panel-body">
            <form id="formSearch" class="search-form form-inline" style="line-height: 2.5; position:relative;" method="post">
                用户&nbsp;
                <input id="userName" name="userName" size="10" class="form-control">
                &nbsp;设备
                <select id="device" name="device" class="form-control">
                    <option value="-1">不限</option>
                    <option value="0">电脑</option>
                    <option value="100">手机</option>
                </select>
                &nbsp;开始时间
                <input id="beginDate" name="beginDate" size="10" class="form-control"/>
                结束时间
                <input id="endDate" name="endDate" size="10" class="form-control"/>
                动作&nbsp;
                <input id="userAction" name="userAction" size="10" class="form-control"/>
                &nbsp;
                部门&nbsp;
                <select id="deptCode" name="deptCode" class="form-control">
                    <option value="">请选择</option>
                    [(${deptOpts})]
                </select>
                类别&nbsp;
                <select id="logType" name="logType" class="form-control">
                    <option value="">请选择</option>
                    <option value="0">登陆系统</option>
                    <option value="1">退出登陆</option>
                    <option value="2">操作</option>
                    <option value="3">警告</option>
                    <option value="4">出错</option>
                    <option value="5">权限</option>
                    <option value="100">攻击</option>
                </select>
                &nbsp;
                <input name="op" type="hidden" value="search"/>
                <button id="btnSearch" type="submit" class="btn btn-default">搜索</button>
            </form>
        </div>
    </div>
    <div id="toolbar">
        <button id="btnDel" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span>&nbsp;删除</button>
    </div>
    <table id="table"></table>
</div>
</body>
<script type="text/javascript" th:inline="javascript">
    $(function () {
        // 初始化Table
        initTable();

        $('#btnSearch').click(function (e) {
            doQuery();
            e.preventDefault();
        });

        /*
        bootstrap-datetimepicker用法
        $('#beginDate').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: moment.locale('zh-cn')
        });*/

        $('#beginDate').datetimepicker({
            lang: 'ch',
            timepicker: false,
            format: 'Y-m-d',
            step: 1
        });
        $('#endDate').datetimepicker({
            lang: 'ch',
            timepicker: false,
            format: 'Y-m-d',
            step: 1
        });
    });

    function doQuery() {
        $('#table').bootstrapTable('refresh');
    }

    function initTable() {
        $('#table').bootstrapTable({
            url: 'getLogList.do',//请求后台的URL（*）
            method: 'post',
            //得到查询的参数
            queryParams: function (params) {
                var temp = $("#formSearch").serializeJsonObject();
                temp["pageSize"] = params.limit;                        //页面大小
                temp["pageNum"] = (params.offset / params.limit) + 1;  //页码
                temp["sort"] = params.sort;                         //排序列名
                temp["order"] = params.order;                   //排位命令（desc，asc）
                return temp;
            },
            toolbar: '#toolbar',//工具按钮用哪个容器
            striped: true,//是否显示行间隔色
            cache: false,//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,//是否显示分页（*）
            sortable: true,//是否启用排序
            sortOrder: "asc",//排序方式
            sidePagination: "server",//分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,//初始化加载第一页，默认第一页
            pageSize: 20,//每页的记录行数（*）
            pageList: [20, 30, 50, 100],//可供选择的每页的行数（*）
            // search: true,//是否显示表格搜索，此搜索是客户端搜索，不会进服务端
            contentType: "application/x-www-form-urlencoded", // 默认是 application/json
            dataType: "json",//期待返回数据类型
            strictSearch: true,
            showColumns: true,//是否显示列按钮
            showRefresh: true,//是否显示刷新按钮
            minimumCountColumns: 2,//最少允许的列数
            clickToSelect: true,//是否启用点击选中行
            // height: 700,//行高，如果没有设置height属性，表格自动根据记录条数取得表格高度
            uniqueId: "account",//每一行的唯一标识，一般为主键列
            showToggle: false,//是否显示详细视图和列表视图的切换按钮
            cardView: false,//是否显示详细视图
            detailView: false,//是否显示父子表
            // showExport: true,
            // exportTypes: ['csv', 'txt', 'xml'],
            columns: [
                {field: "chk", checkbox: true, title: "选择", class: "tablebody", align: "center", valign: "middle"},
                {
                    field: 'logDate',
                    sortable: true,
                    width: '180px',
                    valign: 'middle',
                    title: '日期'
                }, {
                    field: 'realName',
                    sortable: true,
                    width: '150px',
                    valign: 'middle',
                    title: '用户'
                }, {
                    field: 'deptName',
                    sortable: true,
                    width: '150px',
                    valign: 'middle',
                    title: '部门'
                }, {
                    field: 'action',
                    sortable: true,
                    width: '150px',
                    valign: 'middle',
                    title: '动作'
                }, {
                    field: 'ip',
                    sortable: true,
                    width: '150px',
                    valign: 'middle',
                    title: 'IP'
                }, {
                    field: 'device',
                    sortable: true,
                    width: '150px',
                    valign: 'middle',
                    title: '设备'
                }, {
                    field: 'logTypeDesc',
                    sortable: true,
                    width: '150px',
                    valign: 'middle',
                    title: '类型'
                }
            ],
            responseHandler: function (res) {
                return {
                    "rows": res.data,
                    "total": res.total
                };
            }/*,
                rowStyle: function (row, index) {
                    // 隔行变色
                    var classesArr = ['white', 'lightblue'];
                    var strclass = "";
                    if (index % 2 === 0) {
                        // 偶数行
                        strclass = classesArr[0];
                    } else {
                        // 奇数行
                        strclass = classesArr[1];
                    }
                    return {classes: strclass};
                },*/
        });
    }

    $('#btnDel').click(function() {
        var arr = $('#table').bootstrapTable('getSelections');

        if(arr.length==0) {
            jAlert("请选择记录", "[(#{prompt})]");
            return;
        }

        var ids=[];
        for(var i=0;i<arr.length;i++){
            ids.push(arr[i].id);
        }

        jConfirm("您确定要删除么？", "[(#{prompt})]", function (r) {
            if (!r) {
                return;
            }
            $.ajax({
                type: "post",
                url: "delLog.do",
                traditional:true,
                data: {
                    ids: ids
                },
                dataType: "json",
                beforeSend: function (XMLHttpRequest) {
                    $('body').showLoading();
                },
                success: function (data, status) {
                    if (data.ret == 1) {
                        $('#table').bootstrapTable('refresh');
                        $.toaster({
                            "priority": "info",
                            "message": data.msg
                        });
                    } else {
                        jAlert(data.msg, "[(#{prompt})]");
                    }
                },
                complete: function (XMLHttpRequest, status) {
                    $('body').hideLoading();
                },
                error: function () {
                    alert(XMLHttpRequest.responseText);
                }
            });
        });
    });
</script>
</html>
